<template>
  <div class="form Wrapper" >
    <div class="bg">

      <div v-for="(item1,index1) in dataList" :key="index1" class="itemWrapper1"  >
        <!--多选-->
        <div class="itemWrapper"  >
          <div class="title"> 编号：{{item1.Code}}&nbsp{{item1.Name}}</div>
          <div  v-for="(item2,index2) in item1.childs" :key="index2" >
            <div class="f-bian label " >
              <span @click="do_showDetail(item2)" class=" leftTitle"><span class="jianjia"  :class="[item2.showDetail==true&&item2.oS?'jian':'jia',item2.oS?'':'iconShowNO']" ></span>{{item2.Code}}、{{item2.Name}}</span>
              <input :class="[(item2.isSC==true&&item1.sModel=='单选')?'inputRadio':'',(item2.isSC==true&&item1.sModel=='多选')?'inputCheck':'']"  :checked="item2.isSC" :type="item1.sModel=='单选'?'radio':'checkbox'" :name="item1.SN"   @click.stop="doselect(item2,index1,item1,index2)">
            </div>
            <div v-show="item2.showDetail==true&&item2.oS" class="otherChildWrapper">
              <!--子集选项 v-show="item2.isSC==true" v-show="index1==otherShow[index1]"-->
              <div  class=""  v-for="(List2item,List2index) in item2.oS" :key="List2index" v-if="item2.oS">
                <div v-if="List2item" class="" v-for="(List3item,List3index) in List2item.childs" :key="List3index" >
                  <div class="f-bian otherChild">
                    <span>{{List3item.Code}} &nbsp{{List3item.Name}}</span> <input :checked="List3item.isSC" :class="[(List3item.isSC==true&&item2.oS[0].sModel=='单选')?'inputRadio':'',(List3item.isSC==true&&item2.oS[0].sModel=='多选')?'inputCheck':'']" :type="item2.oS[0].sModel=='单选'?'radio':'checkbox'" :name="item2.SN"  @click.stop="doselect2(item1,index1,item2,index2,List3item,List3index)">
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="f-zhong"><button class="btn" @click="do_submit">提交</button> </div>
      <div id="foot">
        <!--背景选择-->
        <ul class="flex ">
          <li class="flex1 f-zhong" v-for="(item,index) in biaoQian" :key="index" @click="chooseBg(index)"><div  :style="bgChoose(index)" :class="bgIndex<7?'borderWhite':''"></div></li>
          <li class="flex1 f-zhong"   id="bai" @click="chooseBg(7)"><div ></div></li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
  import BScroll from 'better-scroll'
  export default {
    name: 'HelloWorld',
    data() {
      return {
        // contentScroll:{},
        bgIndex:'4',
        Domain:this.$ZcPublic.Domain,
        biaoQian:[1,2,3,4,5,6,7],
        dataList2: '',
        otherShow: '',
        SNList:[],
        dataList: [{
          "SN": "8A59D521-D57D-4AF5-9AB7-76143C2E6122",
          "Code": "01",
          "Name": "车型",
          "sModel": "单选",
          "childs": [{
            "id": null,
            "Code": "1",
            "Name": "别克",
            "SN": "E4A05F87-0839-4277-878E-31663F76C0AE",
            "isS": false,
            "IsEnd": false,
            "isSC": false,
            "oS": [{
              "SN": "24B0C050-89A5-4A39-9EB5-657F360F16DA",
              "Code": "1",
              "Name": "购车时段分类",
              "sModel": "多选",
              "childs": [{
                "id": null,
                "Code": "1",
                "Name": "别克11",
                "SN": "C7A8DE96-9A56-4DC7-947E-B73EE0F1A794",
                "isS": false,
                "IsEnd": false,
                "isSC": false,
                "oS": null,
                "childs": null
              }, {
                "id": null,
                "Code": "2",
                "Name": "别克22",
                "SN": "DCEE057A-1EF3-458C-8FE4-D4CE0617EC5D",
                "isS": false,
                "IsEnd": false,
                "isSC": false,
                "oS": null,
                "childs": null
              }, {
                "id": null,
                "Code": "3",
                "Name": "别克33",
                "SN": "698D2923-2EE6-4234-AD21-8FB38FE0344A",
                "isS": false,
                "IsEnd": false,
                "isSC": false,
                "oS": null,
                "childs": null
              }]
            }],
            "childs": null
          }, {
            "id": null,
            "Code": "2",
            "Name": "大众",
            "SN": "D42AA792-E34A-473A-BBE2-1B84BD14F3D7",
            "isS": false,
            "IsEnd": false,
            "isSC": false,
            "oS": [{
              "SN": "24B0C050-89A5-4A39-9EB5-657F360F16DA",
              "Code": "1",
              "Name": "购车时段分类",
              "sModel": "单选",
              "childs": [{
                "id": null,
                "Code": "1",
                "Name": "大众11",
                "SN": "C7A8DE96-9A56-4DC7-947E-B73EE0F1A794",
                "isS": false,
                "IsEnd": false,
                "isSC": false,
                "oS": null,
                "childs": null
              }, {
                "id": null,
                "Code": "2",
                "Name": "大众22",
                "SN": "DCEE057A-1EF3-458C-8FE4-D4CE0617EC5D",
                "isS": false,
                "IsEnd": false,
                "isSC": false,
                "oS": null,
                "childs": null
              }, {
                "id": null,
                "Code": "3",
                "Name": "大众33",
                "SN": "698D2923-2EE6-4234-AD21-8FB38FE0344A",
                "isS": false,
                "IsEnd": false,
                "isSC": false,
                "oS": null,
                "childs": null
              }]
            }],
            "childs": null
          }, {
            "id": null,
            "Code": "3",
            "Name": "宝马",
            "SN": "94A84E35-41FC-4D72-AE36-195CBAC423B5",
            "isS": false,
            "IsEnd": false,
            "isSC": false,
            "oS": null,
            "childs": null
          }, {
            "id": null,
            "Code": "4",
            "Name": "奥迪",
            "SN": "94A84E35-41FC-4D72-AE36-195CBAC423B5",
            "isS": false,
            "IsEnd": false,
            "isSC": false,
            "oS": null,
            "childs": null
          }]
        }, {
          "SN": "15FC9087-4E1B-415C-960E-958634C97F08",
          "Code": "02",
          "Name": "爱好",
          "sModel": "多选",
          "childs": [{
            "id": null,
            "Code": "1",
            "Name": "旅浒",
            "SN": "08221932-2DED-4C2E-9ED7-5C3A74BE5529",
            "isS": false,
            "IsEnd": false,
            "isSC": false,
            "oS": [{
              "SN": "24B0C050-89A5-4A39-9EB5-657F360F16DA",
              "Code": "1",
              "Name": "购车时段分类",
              "sModel": "单选",
              "childs": [{
                "id": null,
                "Code": "1",
                "Name": "旅浒11",
                "SN": "C7A8DE96-9A56-4DC7-947E-B73EE0F1A794",
                "isS": false,
                "IsEnd": false,
                "isSC": false,
                "oS": null,
                "childs": null
              }, {
                "id": null,
                "Code": "2",
                "Name": "旅浒22",
                "SN": "DCEE057A-1EF3-458C-8FE4-D4CE0617EC5D",
                "isS": false,
                "IsEnd": false,
                "isSC": false,
                "oS": null,
                "childs": null
              }, {
                "id": null,
                "Code": "3",
                "Name": "旅浒33",
                "SN": "698D2923-2EE6-4234-AD21-8FB38FE0344A",
                "isS": false,
                "IsEnd": false,
                "isSC": false,
                "oS": null,
                "childs": null
              }]
            }],
            "childs": null
          }, {
            "id": null,
            "Code": "2",
            "Name": "游泳",
            "SN": "2D6BAE46-5455-42E2-9DB5-B0B40161E0C4",
            "isS": false,
            "IsEnd": false,
            "isSC": false,
            "oS": [{
              "SN": "24B0C050-89A5-4A39-9EB5-657F360F16DA",
              "Code": "1",
              "Name": "购车时段分类",
              "sModel": "单选",
              "childs": [{
                "id": null,
                "Code": "1",
                "Name": "游泳11",
                "SN": "C7A8DE96-9A56-4DC7-947E-B73EE0F1A794",
                "isS": false,
                "IsEnd": false,
                "isSC": false,
                "oS": null,
                "childs": null
              }, {
                "id": null,
                "Code": "2",
                "Name": "游泳22",
                "SN": "DCEE057A-1EF3-458C-8FE4-D4CE0617EC5D",
                "isS": false,
                "IsEnd": false,
                "isSC": false,
                "oS": null,
                "childs": null
              }, {
                "id": null,
                "Code": "3",
                "Name": "游泳33",
                "SN": "698D2923-2EE6-4234-AD21-8FB38FE0344A",
                "isS": false,
                "IsEnd": false,
                "isSC": false,
                "oS": null,
                "childs": null
              }]
            }],
            "childs": null
          }, {
            "id": null,
            "Code": "3",
            "Name": "打球",
            "SN": "BB7B971E-44A3-4E09-9CA2-AB5A234D8058",
            "isS": false,
            "IsEnd": false,
            "isSC": false,
            "oS": null,
            "childs": null
          }]
        }, {
          "SN": "DF440209-11B0-45CA-A020-20E821C7507C",
          "Code": "03",
          "Name": "购车意向",
          "sModel": "单选",
          "childs": [{
            "id": null,
            "Code": "1",
            "Name": "最近无购车计划",
            "SN": "D8428D79-FFB0-40DE-9031-2DFB008C03A2",
            "isS": false,
            "IsEnd": false,
            "isSC": false,
            "oS": null,
            "childs": null
          }, {
            "id": null,
            "Code": "2",
            "Name": "最近有购车计划",
            "SN": "A2969198-A51C-4774-A358-CFE061D4C68F",
            "isS": false,
            "IsEnd": false,
            "isSC": false,
            "oS": [{
              "SN": "24B0C050-89A5-4A39-9EB5-657F360F16DA",
              "Code": "1",
              "Name": "购车时段分类",
              "sModel": "单选",
              "childs": [{
                "id": null,
                "Code": "1",
                "Name": "计划1月内购车",
                "SN": "C7A8DE96-9A56-4DC7-947E-B73EE0F1A794",
                "isS": false,
                "IsEnd": false,
                "isSC": false,
                "oS": null,
                "childs": null
              }, {
                "id": null,
                "Code": "2",
                "Name": "计划半年内购车",
                "SN": "DCEE057A-1EF3-458C-8FE4-D4CE0617EC5D",
                "isS": false,
                "IsEnd": false,
                "isSC": false,
                "oS": null,
                "childs": null
              }, {
                "id": null,
                "Code": "3",
                "Name": "计划1年内购车",
                "SN": "698D2923-2EE6-4234-AD21-8FB38FE0344A",
                "isS": false,
                "IsEnd": false,
                "isSC": false,
                "oS": null,
                "childs": null
              }]
            }],
            "childs": null
          }]
        },
          {
            "SN": "DF440209-11B0-45CA-A020-20E821C7507C",
            "Code": "04",
            "Name": "买房",
            "sModel": "单选",
            "childs": [{
              "id": null,
              "Code": "1",
              "Name": "最近无买房计划",
              "SN": "D8428D79-FFB0-40DE-9031-2DFB008C03A2",
              "isS": false,
              "IsEnd": false,
              "isSC": false,
              "oS": null,
              "childs": null
            }, {
              "id": null,
              "Code": "2",
              "Name": "最近有买房计划",
              "SN": "A2969198-A51C-4774-A358-CFE061D4C68F",
              "isS": false,
              "IsEnd": false,
              "isSC": false,
              "oS": [{
                "SN": "24B0C050-89A5-4A39-9EB5-657F360F16DA",
                "Code": "1",
                "Name": "买房时段分类",
                "sModel": "单选",
                "childs": [{
                  "id": null,
                  "Code": "1",
                  "Name": "1月内买房",
                  "SN": "C7A8DE96-9A56-4DC7-947E-B73EE0F1A794",
                  "isS": false,
                  "IsEnd": false,
                  "isSC": false,
                  "oS": null,
                  "childs": null
                }, {
                  "id": null,
                  "Code": "2",
                  "Name": "计划半年内买房",
                  "SN": "DCEE057A-1EF3-458C-8FE4-D4CE0617EC5D",
                  "isS": false,
                  "IsEnd": false,
                  "isSC": false,
                  "oS": null,
                  "childs": null
                }, {
                  "id": null,
                  "Code": "3",
                  "Name": "计划1年内购卖方",
                  "SN": "698D2923-2EE6-4234-AD21-8FB38FE0344A",
                  "isS": false,
                  "IsEnd": false,
                  "isSC": false,
                  "oS": null,
                  "childs": null
                }]
              }],
              "childs": null
            }]
          }],
        indexotherShow: '',
        arrSelect:[]
      }
    },
    mounted() {
      // this.arrSelect=["L-01-1-1", "L-01-1-2", "L-02-3", "L-03-2-2", "L-04-1"];
      this.$nextTick(() => {
        this.dataList.forEach((item, index) => {
          item.childs.forEach((item2, index2) => {
            this.arrSelect= this.$set(item2, "showDetail", false)
          })
        })
        if(localStorage.getItem('data')){
          this.arrSelect=JSON.parse(localStorage.getItem('data'))
          this.SNList=this.arrSelect
        }
        console.log("改后data", this.dataList)
        if(this.arrSelect){
          try {

            this.arrSelect.forEach((item,index)=>{
              let snL=item.split("-")
              this.dataList.forEach((item2,index2)=>{
                if(snL[1]-1==index2){
                  item2.childs.forEach((item3,index3)=>{
                    if(snL[2]==item3.Code) {
                      item3.showDetail = true;
                      item3.isSC = true;
                      if(snL[3]){
                        if (item3.oS) {
                          item3.oS[0].childs.forEach((item4, index4) => {
                            if (snL[3] == item4.Code) {
                              item4.isSC = true;
                            }
                          })
                        }
                      }
                    }
                  })
                }
              })
            })
            console.log("改后data22", this.dataList)
          }catch (e) {
            //alert(e)
          }
        }
        // this.contentScroll = new BScroll(this.$refs.contentWrap, {
        //   probeType: 3,
        //   click: true,
        //   scrollX: false
        // });
      })


    },
    methods: {
      chooseBg(index){
        if(index==7){

        }else {

          this.$router.push('/HelloWorld')
          this.bgIndex=index+1;
          sessionStorage.setItem("bgIndex",this.bgIndex)
        }


      },
      bgChoose(index){
        return  "background-image: url("+this.$ZcPublic.Domain+"/static/biaoQian/"+(index+1)+".png);"
      },
      do_showDetail(item) {
        item.showDetail = !item.showDetail
        console.log(item)
      },
      /* 选择第一级函数*/
      doselect(item, index, itemF, index2) {
        this.indexotherShow = index
        //index为第一级数据的第几个，itemf为第一级数据的一大条数据，item为当前这天数据，index2为当前这条数据位于数组的第几个，
        console.log('第一级大数据', itemF)
        this.$nextTick(() => {
          try {
            item.isSC = !item.isSC

            if (itemF.sModel == "单选") {
              console.log('itemF.childs!', itemF.childs)
              itemF.childs.forEach((itemF2, indexF2) => {
                if (itemF2.isSC) {
                  if (indexF2 != index2) {
                    itemF2.isSC = false
                  }
                } else {
                  itemF2.isSC = false
                }
              })
            }
            itemF.childs.forEach((itemF1,indexF1) => {

              if (!itemF1.isSC) {
                // alert(itemF1.oS[0])
                if (itemF1.oS!=null) {
                  itemF1.oS[0].childs.forEach((itemF12) => {
                    itemF12.isSC = false
                  })
                }
                itemF1.showDetail=false
              }else {
                if(indexF1==index2){
                  itemF1.showDetail=true
                }
              }
            })
            let SN=''
            if(item.isSC){
              item.showDetail=true
            }
            itemF.childs.forEach((itemselect,indexselect)=>{
              SN='L-'+itemF.Code+'-'+itemselect.Code
              if(!itemselect.oS){//如果外层无子选项的情况
                if(itemselect.isSC){//外层已经选中，就往SN数组里面添加SN
                  this.SNList.push(SN)
                }else {//外层变成没选中，就往SN数组里面查找和当前SN一样的并且删除
                  this.SNList.forEach((itemSN,indexSN)=>{
                    if(itemSN==SN){
                      this.SNList.splice(indexSN,1)
                    }
                  })
                }
              }else {//如果外层有子选项的情况,外层没选中
                if(!itemselect.isSC) {//外层没选中，循环删除之前内部的已选择并且从数组里面删除
                  console.log(SN)
                  console.log(this.SNList)
                  console.log("SN88888")
                  this.SNList.forEach((itemSN,indexSN)=>{//循环SN数组
                    // console.log(itemSN)
                    // console.log(SN)
                    if(itemSN.indexOf(SN)>=0){
                      this.SNList.splice(indexSN,1,'')//删除后加一个空值防止数组顺序打乱
                    }
                  })
                }
              }
            })
            console.log("第二层点击sn变化",this.SNList)
          } catch (e) {
            console.log(e)
          }
        })
      },
      /*选择第二级函数*/
      doselect2(item1,index1, item12,index12, item123, index123) {
        //item1为第一层，item12第二层，item123第三层
        let SN=''
        console.log("最外层", item1)
        console.log('第二层', item12)
        console.log('最里层具体点击了那条数据', item123)
        this.$nextTick(() => {
          item123.isSC = !item123.isSC
          if (item12.oS[0].sModel == "单选") {//单选如果当前是选中，更改其他为没选中
            item12.oS[0].childs.forEach((itemF2, indexF2) => {
              if (itemF2.isSC) {
                if (indexF2 != index123) {
                  itemF2.isSC = false
                }
              } else {
                itemF2.isSC = false
              }
            })
          }
          if(item12.isSC){//如果第二层选中
            item12.oS[0].childs.forEach((itemF2, indexF2)=>{
              let SN2='L-'+item1.Code+'-'+item12.Code+'-'+itemF2.Code
              if(itemF2.isSC){//最里层是选中了就往数组里面添加
                let snIsIn=false
                this.SNList.forEach((listItem,listIndex)=>{//判断SN数组里面是否已经添加过本条数据的Sn
                  if(listItem==SN2){
                    snIsIn=true
                  }
                })
                if(!snIsIn){//如果未添加过就添加进去
                  this.SNList.push(SN2)
                }
              }else {
                // 所有未选择都删除
                this.SNList.forEach((itemSN,indexSN)=>{//匹配在SN数组里面有的对应数据
                  if(itemSN==SN2){
                    this.SNList.splice(indexSN,1)
                  }
                })
              }
            })
          }
        })
      },
      do_submit(){

        // this.SNList.forEach((item,index)=>{
        //   if(item==''){
        //     this.SNList.splice(index,1);
        //     index=index-1
        //   }
        // })
        for(let i=0;i<this.SNList.length;i++){
          if(this.SNList[i]==''){
            this.SNList.splice(i,1);
            i=i-1
          }
        }
        console.log('提交SN',this.SNList)
        this.arrSelect=this.SNList
        localStorage.setItem('data',JSON.stringify(this.arrSelect))
        this.$router.go(0)
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  /*自定义*/
  .f,.f-zhong,.f-bian,.f-tb,.flex{
    display: flex;
  }
  .f-zhong,.f-bian,.f-tb,.itemCenter{
    align-items: center;
  }
  .f-bian{
    justify-content: space-between;
  }
  .f-zhong,.f-tb{
    justify-content: center;
  }
  .f-tb{
    flex-direction: column;
  }
  .flexWrap{
    flex-wrap:wrap
  }
  .flex1{
    flex: 1;
  }
  .label {font-size:16px;cursor:pointer;height: 30px;line-height: 30px;margin: 0;padding: 0 }

  @font-face {
    font-family: 'iconfont';  /* project id 1287028 */
    src: url('//at.alicdn.com/t/font_1287028_smao1t4xug.eot');
    src: url('//at.alicdn.com/t/font_1287028_smao1t4xug.eot?#iefix') format('embedded-opentype'),
    url('//at.alicdn.com/t/font_1287028_smao1t4xug.woff2') format('woff2'),
    url('//at.alicdn.com/t/font_1287028_smao1t4xug.woff') format('woff'),
    url('//at.alicdn.com/t/font_1287028_smao1t4xug.ttf') format('truetype'),
    url('//at.alicdn.com/t/font_1287028_smao1t4xug.svg#iconfont') format('svg');
  }
  input[type="checkbox"]{
    /*margin-left: 10px;*/
    position: relative;
    width: 19px;
    height: 19px;
    background-color: transparent;
    -webkit-appearance: none;
    outline: none;
    border: 1px solid grey;
    left: -3px !important;
  }
  input[type="radio"]{
    position: relative;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: transparent;
    -webkit-appearance: none;
    outline: none;
    border: 1px solid grey;
  }
  input{
    position: relative !important;
    right: 3px!important;
  }
  .inputCheck,.inputRadio{
    border: none !important;
  }
  .inputCheck:before,.inputRadio:before, .jia:before, .jian:before{

    font-family: "iconfont" ;
    content: "\e63c" !important;
    font-size:20px !important;
    font-weight: 400 !important;
    color: #3074fe !important;
    cursor: pointer !important;
    display: inline-block !important;
    margin: -9px 0px 0px -5px !important;
    z-index: 99 !important;
    position: absolute !important;
    left: 4px !important;
    top: 3px !important;
  }
  .inputRadio:before{
    font-family: "iconfont" ;
    content: "\e62b" !important;
    font-size: 22px !important;
    margin: -9px 0px 0px -5px !important;
  }
  .title{
    height: 50px ;
    line-height: 50px;
    border-bottom: 1px solid gainsboro;
    font-weight: 400;
  }
  .Wrapper{
    position: absolute;
    top: 0;
    bottom: 60px;
    width: 100%;

  }
  .itemWrapper{
    background-color: white;
    margin: 0 10px 10px;
    padding: 0 20px 10px;
    border: 1px solid white;
    /*box-shadow: 0px 0px 10px 1px;*/
    border-radius: 12px;

  }
  .itemWrapper1{
    margin-top: 30px;

  }
  /*.itemWrapper1:first-child{*/
    /*margin-top: 0;*/
  /*}*/
  .otherChildWrapper{
    margin-top: 10px;
    padding:0 0 0px 20px;
    font-size: 14px;
    line-height: 30px;
    background-color: #dddde4;
    position: relative;
    border-radius: 3px;
    color: grey;
  }
  .otherChildWrapper:before{
    content: '';
    position: absolute;
    border-style:solid;
    border-width:12px 12px 12px;
    border-color: transparent  transparent #dddde4 transparent ;/*灰 透明 透明 */
    top: -22px;
    left: 30px;
  }
  .jianjia{
    display: inline-block;
    width: 16px;
    height: 16px;
    /*margin-right: 5px;*/
    position: relative;
    top: 1px;
  }
  .jia:before{
    font-family: "iconfont" ;
    content: "\e601" !important;
    font-size: 16px !important;
    color: grey !important;
    margin-top: -9px !important;
    margin-right: 5px !important;
  }
  .jian:before{
    font-family: "iconfont" ;
    content: "\e68f" !important;
    font-size: 16px !important;
    color: grey !important;
    margin-top: -9px !important;
    margin-right: 5px !important;
  }

  .leftTitle{
    min-width: 90%;
    height: 30px;
    color: grey;
  }
  .iconShowNO{
    color: red ;
  }
  .iconShowNO:before{
    font-family: "iconfont" ;
    color: white !important;
  }
  .btn{
    width: 80px;
    height: 40px;
    border-radius: 5px;
    background-color: #5ECFB7;
    color: white;
    margin: 20px 0;
  }
  ul li{
    width: 40px ;
    height: 60px;
  }
  ul li div{
    width:35px ;
    height: 50px;
    border: 1px solid black;
    /*background-image: url("../../static/biaoQian/1.jpg");*/
    background-size: 100%;
  }
  #bai>div {
    background-image: none;
    background-color: white;
    border: 1px solid red;
  }
  .borderWhite{
    /*border:1px solid red;*/
  }
  #foot{
    position: fixed;
    /*bottom: 0;*/
    width: 100%;
    /*border: 1px solid ;*/
    height: 60px;
    bottom: 0;
    background-color: white;
    z-index: 999;
  }
  .bg{
    padding-bottom: 70px;
   /*margin-top: 20px;*/
  }
</style>
